<template>
  <div style="margin-top:30px">
          <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <el-form-item label="父类名称:" style="margin-right:15px">{{form.parentName}}</el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <el-form-item label="名称" prop="name" style="margin-right:15px">
                    <el-input v-model="form.name" placeholder="请输入名称" maxlength="50" show-word-limit/>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <el-form-item label="编码" prop="typeCode" style="margin-right:15px">
                    <el-input v-model="form.typeCode" placeholder="请输入编码" maxlength="100" show-word-limit/>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <el-form-item label="显示顺序" prop="sort" style="margin-right:15px">
                    <el-input type="number" v-model="form.sort" placeholder="请输入显示顺序"/>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit"  :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
import { goodsTypeEdit,goodsTypeDetail} from '@/api/basicInfo'
import shipmentSelect from '@/views/components/shipmentSelect.vue'

Vue.use(VXETable)
export default {
  components: {
    shipmentSelect
  },
  props: {
    operationCode: {
      type: String,
      required: true
    }
  },
    data() {
      return {
        isDisable:false,   //确定键显示按钮

        isReadOnly:false,//编码默认可写
        message: '',
        loading: false,
        tableData: [],
        modelAddFlag: false,
        modelEditFlag: false,
        modelDetailFlag: false,
        copy: false,
        treeData: [],
        props: {
          label: 'label',
          children: 'children',
          sort:'sort'
        },
        form: {
          id: '',
          code: '',
          name: '',
          level: '',
          parentCode: '',
          shipmentCode:'',
          parentName:'',
          sort: '',
          oldCode:''
        },
        oldNodeVal:'',
        rules: {
          typeCode: [
            {required: true, message: '请输入编码', trigger: 'blur'},

          ],
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},

          ],
          sort: [
            {required: true, message: '请输入显示顺序', trigger: 'blur'},
          ],
        }
      };
    },
  created() {
    this.getInfo()
  },
  methods: {

    // 获取页面信息
    getInfo() {
      goodsTypeDetail(this.operationCode).then(response => {
        this.form = response.data
      })
    },

    // 提交
    funcSubmit() {
      const data = this.form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isDisable = true;
          goodsTypeEdit(data).then(response => {
            this.$message({ message: response.msg, type: 'success' })
            this.$emit('fatherItemEditMethod')
            this.isDisable = false
          }).catch(() => this.isDisable = false)
        } else {
          return false
        }
      })

    },
  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
